<template>
  <div>
    <div class="echart-clock">
      <div style="height: 200px" ref="echart">
        echart
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  components: {},
  data() {
    return {
      timer: null,
      option: {
        series: [
          {
            name: "hour",
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 12,
            splitNumber: 12,
            clockwise: true,
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, "rgba(0,0,0,0.7)"]],
                shadowColor: "rgba(0, 0, 0, 0.5)",
                shadowBlur: 15
              }
            },
            splitLine: {
              lineStyle: {
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 3,
                shadowOffsetX: 1,
                shadowOffsetY: 2
              }
            },
            axisLabel: {
              fontSize: 10,
              distance: 5,
              formatter: function(value) {
                if (value === 0) {
                  return "";
                }
                return value + "";
              }
            },
            pointer: {
              icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
              width: 5,
              length: "55%",
              offsetCenter: [0, "8%"],
              itemStyle: {
                color: "#C0911F",
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            detail: {
              show: false
            },
            title: {
              offsetCenter: [0, "30%"]
            },
            data: [
              {
                value: 0
              }
            ]
          },
          {
            name: "minute",
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            clockwise: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
              width: 3,
              length: "70%",
              offsetCenter: [0, "8%"],
              itemStyle: {
                color: "#C0911F",
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            anchor: {
              show: true,
              size: 2,
              showAbove: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: "#C0911F",
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            detail: {
              show: false
            },
            title: {
              offsetCenter: ["0%", "-40%"]
            },
            data: [
              {
                value: 0
              }
            ]
          },
          {
            name: "second",
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            animationEasingUpdate: "bounceOut",
            clockwise: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
              width: 1,
              length: "85%",
              offsetCenter: [0, "8%"],
              itemStyle: {
                color: "#C0911F",
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            anchor: {
              show: true,
              size: 1,
              showAbove: true,
              itemStyle: {
                color: "#C0911F",
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4
              }
            },
            detail: {
              show: false
            },
            title: {
              offsetCenter: ["0%", "-40%"]
            },
            data: [
              {
                value: 0
              }
            ]
          }
        ]
      }
    };
  },
  created() {
  },
  mounted() {
    this.getTime();
  },
  beforeUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    getTime() {
      let myEchart = echarts.init(this.$refs.echart);
      myEchart.setOption(this.option);
      let self = this;
      if (self.timer) {
        clearInterval(self.timer);
      }
      this.timer = setInterval(() => {
        const date = new Date();
        const second = date.getSeconds();
        const minute = date.getMinutes() + second / 60;
        const hour = (date.getHours() % 12) + minute / 60;
        self.option.animationDurationUpdate = 300;
        myEchart.setOption({
          series: [
            {
              name: "hour",
              animation: hour !== 0,
              data: [{ value: hour }]
            },
            {
              name: "minute",
              animation: minute !== 0,
              data: [{ value: minute }]
            },
            {
              animation: second !== 0,
              name: "second",
              data: [{ value: second }]
            }
          ]
        });
      }, 1000);
    }
  }
};
</script>

<style scoped>
.echart-clock {
  background: #ffffff;
  z-index: 20;
  position: relative;
}
</style>
